<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        #userInfoDialog {
            padding: 20px;
            width: 400px;
            display: none; /*隐藏层*/
        }

        #userInfoDialog p {
            padding: 10px 0;
        }
    </style>


</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">管理员列表</div>
        <div class="layui-card-body">
            <table id="adminlist" lay-filter="adminFilter"></table>
        </div>
    </div>
</div>
<!--用户信息对话框-->
<div id="userInfoDialog">
    <table class="layui-table">
        <tr>
            <td>用户名</td>
            <td><span id="username"></span></td>
        </tr>
        <tr>
            <td>添加时间</td>
            <td><span id="addtime"></span></td>
        </tr>
        <tr>
            <td>状态</td>
            <td><span id="status"></span></td>
        </tr>
    </table>
</div>
<script src="../res/js/config.js"></script>
<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        //加载获取table模块
        var table = layui.table;
        //加载获取layer弹层模块
        var layer = layui.layer;
        //加载jquery对象
        var $ = layui.jquery;
        var util = layui.util;

        //渲染数据表格
        table.render({
            elem: '#adminlist',   //需要渲染的数据表格选择器
            url: "http://localhost:80/admin/list",   //服务端数据接口地址
            page: {          //设置分页参数
                limit: 2,    //每页数据条数
                limits: [1, 2, 3, 5], //页码选择列表
                theme: '#1E9FFF' //分页颜色主题
            },
            cols: [[             //配置表头
                {type: 'checkbox'},
                {title: '序号', type: 'numbers'},
                {title: '用户名', field: 'username'},
                {
                    title: '添加时间',
                    field: 'addtime',
                    width: 180,
                    templet: '<div>{{layui.util.toDateString(d.addtime,"yyyy-MM-dd")}}</div>'
                },
                {
                    title: '状态', field: 'status', templet: function (d) {
                        if (d.status === 0) {
                            return '<div><span class="layui-badge layui-bg-blue">正常</span></div>'
                        }
                        return '<div><span class="layui-badge layui-bg-red">禁用</span></div>'
                    }
                },
                {title: '操作', width: 220, templet: '#rowTools'}
            ]]
        })

        //为表格行工具绑定事件
        table.on('tool(adminFilter)', function (obj) {
            //获取事件名（lay-event属性值）
            let layEvent = obj.event;
            //获取当前正在操作的数据行
            let data = obj.data;

            switch (layEvent) {
                case 'details':
                    //显示弹出层
                    layer.open({
                        type: 1,     //设置弹层类型 1：页面层
                        content: $('#userInfoDialog'),  // 使用dom节点作为弹层内容
                        shade: 0,  //去除遮罩
                        btn: ['确定'], //显示按钮
                        yes: function () { //按钮点击之后的回调
                            //关闭所有层
                            layer.closeAll();
                        },
                        success: function (layero, index) {  //当弹出层成功显示之后回调
                            //将指定区域的用户信息获取并填充
                            $('#headimg').attr('src', '').attr('src', data.headimg);
                            layero.find('#username').text('').text(data.username);
                            layero.find('#addtime').text('').text(util.toDateString(data.addtime, "yyyy年MM月dd日 HH:mm:ss"));
                            layero.find('#status').text('').html(data.status === 0 ? '<span class="layui-badge layui-bg-blue">正常</span>' : '<span class="layui-badge layui-bg-red">禁用</span>')
                        }
                    })
                    break;
                case 'del':
                    layer.confirm('确认删除该管理员吗?', {icon: 3}, function () {
                        let index = layer.load(1);
                        $.get("http://localhost:80/admin/del?id="+ data.id, function (resp) {
                            layer.close(index);
                            if (resp.code === 0) {
                                layer.msg(resp.msg, function () {
                                    //执行dom删除
                                    obj.del();
                                    //更新表格
                                    table.reload('userlist');
                                })
                            } else {
                                layer.msg(resp.msg);
                            }
                        })
                    })
                    break;
                case 'updateStatus':
                    //显示确认框
                    layer.confirm('确认修改吗?', {icon: 3}, function () {
                        //对状态取反
                        data.status = data.status === 0 ? 1 : 0;
                        //显示加载层
                        let index = layer.load(1);

                        // 调用后台接口
                        $.ajax({
                            type: 'post',
                            url: "http://localhost:80/admin/modifyStatus",
                            contentType: "application/json",
                            // dataType: "json",
                            data: JSON.stringify(data),
                            // processData:false,
                            success: function (resp) {
                                //关闭加载层
                                layer.close(index);
                                if (resp.code === 0) {
                                    layer.msg(resp.msg, function () {
                                        //更新表格
                                        table.reload('adminlist');
                                    });
                                } else {
                                    layer.msg(resp.msg);
                                }
                            }
                        });


                    })
                    break;
            }
        })
    })
</script>


<!--操作栏自定义模板-->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-list"></i>
            详情
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
        {{# if(d.status === 0){ }}
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="updateStatus" data-status="1">
            <i class="layui-icon layui-icon-close-fill"></i>
            禁用
        </button>
        {{# }else{ }}
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="updateStatus" data-status="0">
            <i class="layui-icon layui-icon-ok-circle"></i>
            启用
        </button>
        {{# } }}
    </div>
</script>


</body>
</html>